<template>
    <div class="ratingselect">
        <div class="rating-type border-1px">
            <span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">
                {{desc.all}}
            <span class="count">47</span>
            </span>
            <span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">
                {{desc.positive}}
            <span  class="count">50</span>
            </span>
            <span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">
                {{desc.negative}}
            <span class="count">51</span>
            </span>
        </div>
        <div class="switch" :class="{'on':onlyContent}">
            <span class="icon-check_circle"></span>
            <span class="text">只看有内容的评价</span>

        </div>
    </div>
</template>

<script>
const POITVE = 0;
const NEGATIVE = 1;
const All = 2;
export default {
  name: "ratingselect",
  props: {
    ratings: {
      type: Array,
      default() {
        return [];
      }
    },
    selectType: {
      type: Number,
      default: All
    },
    onlyContent: {
      type: Boolean,
      default: false
    },
    desc: {
      type: Object,
      default() {
        return {
          all: "全部",
          postitive: "满意",
          negative: "不满意"
        };
      }
    }
  },
  methods: {
    select(type, event) {
      this.$emit("select", type);
    }
  }
};
</script>

<style lang="stylus">
    @import "../assets/css/mixin.styl"
.ratingselect
    .rating-type
       padding 18px 0
       margin 0 18px
       border-1px(rgba(7.17.27.0.1))
       font-size 0
       .block
         display inline-block
         padding 8px 12px
         margin-right 8px
         border-radius 2px
         color rgb(77,85,93)
         font-size 12px;
         &.active
             color: #fff
         .count
           margin-left 2px;
           line-height 12px;
           font-size 8px;

         &.positive
          background rgba(0,160,220,0.2)
          &.active
              background rgba(0,160,220,1)
         &.negative
          background rgba(77,85,93,0.2)
          &.active
              background rgba(77,85,93,1)


    .switch
     padding 12px 18px
     line-height 24px
     border-bottom 1px solid rgba(7,17,27,0.1)
     color rgb(147,153,159)
     font-size 0
     &.on
        .icon-check_circle
           color #00C850
     .icon-check_circle
       display inline-block
       vertical-align top
       margin-right 4px;
       font-size 24px;
     .text
         display inline-block
         vertical-align top
         font-size 12px;



</style>
